import React, { useState } from 'react';
import './index.css';

const ImageUploadDownload = () => {
    // 用于存储上传图片的 URL
    const [imageUrl, setImageUrl] = useState(null);

    // 处理文件上传的函数
    const handleFileChange = (e) => {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            // 当文件读取完成时触发该事件
            reader.onload = (event) => {
                setImageUrl(event.target.result);
            };
            // 以 DataURL 格式读取文件
            reader.readAsDataURL(file);
        }
    };

    // 处理下载的函数
    const handleDownload = () => {
        if (imageUrl) {
            // 将 DataURL 转换为 Blob 对象
            const byteCharacters = atob(imageUrl.split(',')[1]);
            const byteNumbers = new Array(byteCharacters.length);
            for (let i = 0; i < byteCharacters.length; i++) {
                byteNumbers[i] = byteCharacters.charCodeAt(i);
            }
            const byteArray = new Uint8Array(byteNumbers);
            const blob = new Blob([byteArray], { type: imageUrl.split(',')[0].split(':')[1].split(';')[0] });

            // 创建一个 <a> 标签
            const a = document.createElement('a');
            // 生成 Blob 对象的 URL
            a.href = URL.createObjectURL(blob);
            // 设置下载的文件名
            a.download = 'uploaded_image.jpg';
            // 模拟点击 <a> 标签触发下载
            a.click();
            // 释放创建的 URL 对象
            URL.revokeObjectURL(a.href);
        }
    };
    // 使用 useState 管理评论列表
    const [comments, setComments] = useState([]);

    // 使用 useState 管理新评论的输入内容
    const [newComment, setNewComment] = useState('');

    // 使用 useState 管理当前正在编辑的评论 ID
    const [editingCommentId, setEditingCommentId] = useState(null);

    // 使用 useState 管理编辑评论时的输入内容
    const [editingText, setEditingText] = useState('');

    // 使用 useState 管理当前正在回复的评论 ID
    const [replyingToCommentId, setReplyingToCommentId] = useState(null);

    // 使用 useState 管理回复评论时的输入内容
    const [replyText, setReplyText] = useState('');

    // 添加新评论的函数
    const addComment = () => {
        if (newComment.trim() === '') return; // 如果输入为空，则不添加
        const comment = {
            id: Date.now(), // 使用时间戳作为评论的唯一 ID
            text: newComment, // 评论内容
            replies: [], // 初始化回复列表为空
        };
        setComments([...comments, comment]); // 将新评论添加到评论列表中
        setNewComment(''); // 清空输入框
    };

    // 删除评论的函数
    const deleteComment = (id) => {
        setComments(comments.filter(comment => comment.id !== id)); // 过滤掉指定 ID 的评论
    };

    // 开始编辑评论的函数
    const startEdit = (id, text) => {
        setEditingCommentId(id); // 设置当前正在编辑的评论 ID
        setEditingText(text); // 将评论内容填充到编辑输入框中
    };

    // 保存编辑内容的函数
    const saveEdit = (id) => {
        setComments(comments.map(comment =>
            comment.id === id ? { ...comment, text: editingText } : comment // 更新指定 ID 的评论内容
        ));
        setEditingCommentId(null); // 退出编辑模式
        setEditingText(''); // 清空编辑输入框
    };

    // 开始回复评论的函数
    const startReply = (id) => {
        setReplyingToCommentId(id); // 设置当前正在回复的评论 ID
    };

    // 添加回复的函数
    const addReply = (id) => {
        if (replyText.trim() === '') return; // 如果回复内容为空，则不添加
        setComments(comments.map(comment =>
            comment.id === id
                ? { ...comment, replies: [...comment.replies, { id: Date.now(), text: replyText }] } // 将新回复添加到指定评论的回复列表中
                : comment
        ));
        setReplyingToCommentId(null); // 退出回复模式
        setReplyText(''); // 清空回复输入框
    };

    return (
        <div>
            <div>
                <button>分享</button><button onClick={handleDownload}>下载图片</button>
            </div>
            <div>
                {/* 文件上传输入框 */}
                <input type="file" accept="image/*" onChange={handleFileChange} />
                {imageUrl && (
                    <div>
                        {/* 显示上传的图片 */}
                        <img src={imageUrl} alt="Uploaded" style={{ maxWidth: '100%' }} />
                        {/* 下载按钮 */}

                    </div>
                )}
            </div>
            <div>
                {/* 添加评论的输入区域 */}
                <div>
                    <textarea
                        value={newComment}
                        onChange={(e) => setNewComment(e.target.value)} // 监听输入内容的变化
                        placeholder="添加新评论"
                    />
                    <button onClick={addComment}>添加评论</button> {/* 点击按钮添加评论 */}
                </div>

                {/* 评论列表 */}
                <div>
                    {comments.map(comment => (
                        <div key={comment.id} style={{ margin: '10px', padding: '10px', border: '1px solid #ccc' }}>
                            {/* 如果当前评论正在编辑，则显示编辑区域 */}
                            {editingCommentId === comment.id ? (
                                <div>
                                    <textarea
                                        value={editingText}
                                        onChange={(e) => setEditingText(e.target.value)} // 监听编辑内容的变化
                                    />
                                    <button onClick={() => saveEdit(comment.id)}>保存</button> {/* 点击按钮保存编辑内容 */}
                                </div>
                            ) : (
                                <div>
                                    <p>{comment.text}</p> {/* 显示评论内容 */}
                                    <button onClick={() => startEdit(comment.id, comment.text)}>编辑</button> {/* 点击按钮进入编辑模式 */}
                                    <button onClick={() => deleteComment(comment.id)}>删除</button> {/* 点击按钮删除评论 */}
                                    <button onClick={() => startReply(comment.id)}>回复</button> {/* 点击按钮进入回复模式 */}
                                </div>
                            )}

                            {/* 如果当前评论正在回复，则显示回复输入区域 */}
                            {replyingToCommentId === comment.id && (
                                <div>
                                    <textarea
                                        value={replyText}
                                        onChange={(e) => setReplyText(e.target.value)} // 监听回复内容的变化
                                        placeholder="回复评论"
                                    />
                                    <button onClick={() => addReply(comment.id)}>添加回复</button> {/* 点击按钮添加回复 */}
                                </div>
                            )}

                            {/* 显示当前评论的所有回复 */}
                            {comment.replies.map(reply => (
                                <div key={reply.id} style={{ marginLeft: '20px', padding: '5px', border: '1px solid #eee' }}>
                                    <p>{reply.text}</p> {/* 显示回复内容 */}
                                </div>
                            ))}
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
};

export default ImageUploadDownload;